<template>
	<view>
		<view class="" style="position: relative;">
			<view :class="item.wrap?'tu':''" v-for="(item,index) in arr" :key="index">
				<image  :src="item.state==0?item.zmimg:item.bmimg" mode=""
					:style="'position: absolute; left:'+item.x+' ; top:'+item.y+';'" :class="item.flag?'dh':'dhs '"
					@click="select(index)">
				</image>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		props: {
			arr: {
				type: Array,
				default: []
			}
		},
		methods: {
			select(v) {
				this.$emit('select', {
					i: v
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	image {
		width: 210rpx;
		height: 275rpx;

	}

	.tu {
		filter: grayscale(100%);
		-webkit-filter: grayscale(100%);
		-moz-filter: grayscale(100%);
		-ms-filter: grayscale(100%);
		-o-filter: grayscale(100%);
		filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
		-webkit-filter: grayscale(1);
		transition: all 1.5s cubic-bezier(.68, -.22, .265, 1.22);
	}

	.dh {
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		transform-style: preserve-3d;
		transition: all 1s cubic-bezier(.68, -.22, .265, 1.22);
		transform: rotateY(-360deg)
	}

	.dhs {
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		transform-style: preserve-3d;
		transition: all 1s cubic-bezier(.68, -.22, .265, 1.22);
		transform: rotateY(360deg);

	}

	.fk {
		position: absolute;
		left: 10rpx;
		font-family: MicrosoftYaHei;
		font-size: 26rpx;
		color: #f74033;
		z-index: 100;
	}
</style>
